<template>
  <div>
    <template v-if="isshowpage">
      <div class="top-img">
        <img src="../../assets/login_logo.png" alt />
      </div>
      <div class="bottom-box">
        <div class="login-xy">
          <van-checkbox v-model="checked" icon-size="16px"></van-checkbox>
          <p class="xy-content">
            我已同意
            <span>用户协议</span>和
            <span>隐私政策</span>
          </p>
        </div>
        <div>
          <div class="login-btn" @click="tologinPage">
            <van-icon name="wechat" size="20" />
            <p>微信登录或短信登录</p>
          </div>
          <div class="no-login" @click="nologin">暂不登陆</div>
        </div>
      </div>
    </template>
    <template v-else>
      <div class="loginpage">
        <van-form @submit="queryFormInfo">
          <van-field
            v-model="value"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写手机号' },{pattern:/^(0|86|17951)?(13[0-9]|15[012356789]|166|17[3678]|18[0-9]|14[57])[0-9]{8}$/, message: '手机号码格式不正确'}]"
          />
          <van-field v-model="sms" center clearable label="短信验证码" placeholder="请输入短信验证码">
            <template #button>
              <van-button size="small" :disabled="disabled" type="primary" @click="timesetdjs">{{showmsg}}</van-button>
            </template>
          </van-field>
          <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">登录</van-button>
          </div>
        </van-form>
      </div>
    </template>
  </div>
</template>
<script>
import { Checkbox, Icon, Field, Form, CellGroup ,Button} from "vant";
export default {
  data() {
    return {
      checked: false,
      isshowpage: true,
      disabled:false,
      showmsg: "发送验证码",
      value:"",
      sms:"",
    };
  },
  components: {
    [Checkbox.name]: Checkbox,
    [Icon.name]: Icon,
    [Field.name]: Field,
    [Form.name]: Form,
    [CellGroup.name]: CellGroup,
    [Button.name]:Button
  },
  created() {
    this.$store.commit("set_bottombar_visible", false);
  },
  mounted(){
    
  },
  methods: {
    nologin() {
      this.$router.push({
        path: "/home"
      });
    },
    tologinPage() {
      this.isshowpage = false;
    },
    timesetdjs(){
      if(this.value == ""){
        return
      }
      var currentTime = 60
      this.disabled = true;
      var that = this;
      let code = that.suijiCode()
      let phoneNum = that.value
      that.querycommunication(code,phoneNum)
      var interval = setInterval(function () {
        that.showmsg = (currentTime - 1) + 's'
        currentTime--;
        if (currentTime < 0) {
          clearInterval(interval);//清除计时器
          that.disabled = false
          that.showmsg = "发送验证码"
          currentTime = 60
        }
      },1000)

      //10734
      ///communication/sms/send?apiKey=您的apiKey&phoneNum=参数1&templateID=参数2&params=参数3
    },
    async querycommunication(code,phoneNum){
        let res = await this.$axios.post('/api/communication/sms/send',{
          apiKey:'Ib3I1727eb283024b369d60868c8f7b3a719354fd552991',
          phoneNum,
          templateID:"10734",
          params: code
        })
        console.log(res)
    },
    suijiCode(){
      // 获取一个[0,1) 的随机数
			var randomNum = Math.random()
		  //获取一个固定的4位数 
			var checkCode = randomNum*9000
				checkCode +=1000;
			return parseInt(checkCode)
    },
    queryFormInfo(){

    }
  }
};
</script>
<style lang="less" scoped>
.top-img {
  margin-top: 20px;
}
.bottom-box {
  font-size: 16px;
  color: #333333;
  display: flex;
  flex-direction: column;
  align-items: center;
  .login-xy {
    display: flex;
    line-height: 28px;
    .xy-content {
      margin: 0;
      font-size: 14px;
      padding-left: 4px;
      span {
        color: #0190e6;
      }
    }
  }
}
.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 32px;
  background-color: #1989fa;
  width: 180px;
  font-size: 14px;
  border-radius: 16px;
  color: #ffffff;
  p {
    margin: 0;
    padding-left: 4px;
  }
}
.no-login {
  font-size: 14px;
  color: #999999;
  margin: 18px 0;
  text-align: center;
}
.loginpage{
  height: 100vh;
  // background: url('../../../public/img/lg_bgc.jpg') no-repeat 100% 100%;
}
</style>
